.word-wrapper {
  position: relative;

  .word-title {
    display: inline-block;
    margin-left: 2rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .word-image {
    width: 33.5rem;
    height: 16rem;
    margin-left: 2rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
  }

  .word {
    margin-left: 2.4rem;
    font-family: baloo;
    font-size: 3rem;
    color: $uni-text-color;
  }

  .word-translated {
    display: flex;
    align-items: center;
    height: 2.3rem;
    margin-left: 2.4rem;
    margin-bottom: 2rem;

    .translated {
      display: inline-block;
      margin-right: 1rem;
      font-size: 1.5rem;
      font-family: xiaolai;
      color: $uni-text-color-grey;
    }

    .loudspeaker {
      width: 2.1rem;
      height: 2.1rem;
      margin-top: 0.3rem;
    }
  }

  .word-line {
    width: 32.6rem;
    height: 1px;
    margin-bottom: 1.4rem;
    margin-left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px dashed #dcc1b7;
  }

  .translate {
    display: inline-block;
    margin-left: 2.4rem;
    font-size: 1.5rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .word-speaking {
    position: absolute;
    width: 3.3rem;
    height: 3.3rem;
    left: 2.9rem;
    top: 15.8rem;
    border-radius: 50%;
    background-color: #fdf2e0;
  }

  .word-sentence {
    display: inline-block;
    padding: 0 2rem;
    font-size: 1.7rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .words-space {
    height: 14rem;
  }
}
